<template>
  <div class="live-member">
    <MainHeader
      @inputChange="inputChange"
      placeholder="搜索直播间名称、主播名称、房间号等……"
      title="直播成员"
    ></MainHeader>
    <div shadow="always">
      <div class="control">
        <div class="right">
          <!-- <div class="total-number">共{{ memberList.length }}名成员</div> -->
          <el-button @click="remevoRoles" size="small " type="danger"
            >删除成员</el-button
          >
          <el-button @click="showAddMemberDialog" size="small " type="primary"
            >添加成员</el-button
          >
        </div>
      </div>
      <MemberCard></MemberCard>
    </div>
    <RemoveMember ref="removeDialog"></RemoveMember>
    <AddMember ref="addMemberDialog" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { MainHeader } from '@/components/main-header/index'

import MemberCard from './cpns/member-card.vue'
import AddMember from './cpns/add-member.vue'
import RemoveMember from './cpns/remove-member.vue'

export default defineComponent({
  components: { MainHeader, AddMember, MemberCard, RemoveMember },
  async setup() {
    // 拿到ref element
    const addMemberDialog = ref()
    const removeDialog = ref()
    // 生命周期钩子
    onMounted(() => {
      // console.log(addMemberDialog.value)
      return { addMemberDialog, removeDialog }
    })
    // 弹出添加
    const showAddMemberDialog = () => {
      // console.log(addMemberDialog.value.dialogVisible)
      addMemberDialog.value.dialogVisible = true
    }

    // 弹出删除
    const remevoRoles = () => {
      removeDialog.value.dialogVisible = true
    }

    const inputChange = (e: any) => {
      console.log(e)
    }
    return {
      showAddMemberDialog,
      inputChange,
      addMemberDialog,
      removeDialog,
      remevoRoles,
    }
  },
})
</script>

<style lang="less" scoped>
.live-member {
  .el-dropdown {
    cursor: pointer;
    font-weight: 800;
  }
  font-size: 16px;

  .el-card {
    min-height: 80vh;
  }

  .control {
    padding: 20px;
    display: flex;
    justify-content: flex-end;

    .right {
      display: flex;
      align-items: center;

      .total-number {
        margin-right: 0.6rem;
        color: #888;
        font-size: 0.14rem;
      }
    }
  }

  .member-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.4rem;
  }
}
</style>
